import { Tabs } from 'antd'
import { useHistory, useLocation } from 'react-router-dom'
import './TabsNav.css'

const tabIcons = {
  '/card': <span className="dot" />, // 你可以根据路由自定义图标
}

const TabsNav = ({ tabs, setTabs, activeKey, setActiveKey }) => {
  const history = useHistory()
  const location = useLocation()

  const onChange = (key) => {
    setActiveKey(key)
    console.log('Navigating to:', key)
    history.push(key)
  }

  const onEdit = (targetKey, action) => {
    if (action === 'remove') {
      const newTabs = tabs.filter(tab => tab.key !== targetKey)
      setTabs(newTabs)
      if (activeKey === targetKey && newTabs.length) {
        setActiveKey(newTabs[newTabs.length - 1].key)
        history.push(newTabs[newTabs.length - 1].key)
      }
    }
  }

  return (
    <div className="tabs-nav-container">
      <Tabs
        size='small'
        className="dark-tabs"
        type="editable-card"
        hideAdd
        onChange={onChange}
        activeKey={activeKey}
        onEdit={onEdit}
        items={tabs.map(tab => ({
          key: tab.key,
          label: tab.label,
          children: tab.component,
          closable: tab.closable !== false,
        }))}
        destroyInactiveTabPane={true}
      />
    </div>
  )
}

export default TabsNav